<template>
  <BasicDrawer ref="drawerRef" v-bind="$attrs" @register="registerDrawer" :title="title" width="1000px" destroyOnClose showFooter @ok="handleSubmit">
    <SubjectAuthorize :subjectId="state.id" :subjectName="state.userName" subjectType="user" ref="authorizeRef"/>

  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, onUnmounted, onMounted, toRaw } from "vue"
  import { BasicDrawer, useDrawer, useDrawerInner } from "/@/components/Drawer"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { SubjectAuthorize } from "/@/components/My/SubjectAuthorize/index"
  import * as ramApi from "/@/api/sys/ram"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { JDictSelectTag } from "/@/components/Form"

  const { createMessage } = useMessage()
  const authorizeRef = ref<any>()
  const emit = defineEmits(["success", "register"])
  const { prefixCls } = useDesign("role-api-perm")

  const state = ref<any>({
    loading: false,
    id: "",
    userName: {},
  })
  const stateValue = state.value
  const drawerRef = ref<HTMLElement>()
  const title = computed(() => `新增授权 【${state.value.userName}(${state.value.id})】`)
  onMounted(() => {})

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false, loading: true })
    try {
      stateValue.id = data.id
      stateValue.userName = data.userName
    } finally {
      setDrawerProps({ loading: false })
    }
  })

  onUnmounted(() => {
    clearTimeout(stateValue.timer)
  })


  const handleSubmit = async () => {
    setDrawerProps({ confirmLoading: true })
    try {
      const values = await authorizeRef.value.getFormValue()
      console.log('values', values)
      await ramApi.assignPermPolicyToOauthClient(values)
      createMessage.success("授权成功")
      closeDrawer()
      emit("success")
    } finally {
      setDrawerProps({ confirmLoading: false })
    }
  }
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-role-api-perm";
  .@{prefix-cls} {
    &-action-type {
      margin: 5px;

      .ant-select-single {
        width: 110px !important;
      }
    }
  }

  .ant-transfer .ant-transfer-operation .ant-btn {
    .anticon {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
